{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style type="text/css">
	.backlist .el-table::before{height: 0;}
	.backlist .el-table td{border-bottom: 0;}
	.w-30px{width: 30px;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px nav-left p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_account"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow pb-3">
			<el-tabs v-model="activeName" class="bg-white">
				<el-tab-pane label="账号安全" name="account"></el-tab-pane>
				<el-tab-pane label="个人信息" name="user_info"></el-tab-pane>
				<el-tab-pane label="屏蔽人才" name="blacklist"></el-tab-pane>
				<el-tab-pane label="登录日志" name="login_log"></el-tab-pane>
			</el-tabs>
			<div v-show="activeName=='account' || activeName=='user_info'">
				<div class="bg-FFF0E5 p-3 mt-3 flex">
					<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
					<div class="flex-1 pl-2">
						<h6 class="text-primary">小提示</h6>
						<div class="text-secondary">手机号、邮箱认证通过后可增强您账号的安全性，也可通过已认证的手机号、邮箱快速登录帐号。</div>
					</div>
				</div>
				<div class="py-3">
					<el-form :model="form" @submit.native.prevent="submitForm('form')" :rules="rules" ref="form" label-width="120px" label-position="right">
						<div v-show="activeName=='account'">
						  <el-form-item label="手机号" prop="mobile">
						  	{{userInfo.mobile}}
						  	<el-link href="/user/editMobile" type="primary" :underline="false">更换绑定手机</el-link>
						  </el-form-item>

						  <el-form-item label="邮箱" prop="email" v-if="userInfo.email">
						  	{{userInfo.email}}
						  	<el-link href="/user/editEmail" type="primary" :underline="false">更换绑定邮箱</el-link>
						  </el-form-item>

						  <el-form-item label="邮箱" v-else="userInfo.email">
						  	未绑定
						  	<el-link href="/user/editEmail" type="primary" :underline="false">去绑定</el-link>
						  </el-form-item>

						  <el-form-item label="用户名" prop="user">
						  	<span v-if="userInfo.user">{{form.user}}</span>
						    <el-input v-model="form.user" class="col-12 col-sm-6 pl-0 pr-0 rounded-0" maxlength="20" v-else></el-input>
						  </el-form-item>

						  <el-form-item label="密码" prop="password">
						    <el-input type="password" v-model="form.password" class="col-12 col-sm-6 pl-0 pr-0 rounded-0" maxlength="20"></el-input>
						  </el-form-item>

						  <el-form-item label="再次输入密码" prop="vpassword" v-if="form.password">
						    <el-input type="password" v-model="form.vpassword" class="col-12 col-sm-6 pl-0 pr-0 rounded-0" maxlength="20"></el-input>
						  </el-form-item>
					  	</div>
						<div v-show="activeName=='user_info'">

						  <el-form-item label="头像" prop="headimg">
							  
							<div class="flex">
							  <el-image
								  v-if="headimg" 
								  class="w-80px h-80px rounded-circle"
								  :src="headimg" 
								  :preview-src-list="[headimg]">
							  </el-image>
							  <div class="ml-3 w-80px h-80px position-relative"
							  v-if="userInfo.after_avatar && userInfo.after_avatar.id" >
								  <el-image
									  class="w-80px h-80px rounded-circle"
									  :src="userInfo.after_avatar.after_avatar" 
									  :preview-src-list="[userInfo.after_avatar.after_avatar]"
									  fit="contain">
								  </el-image>
								  <div class="rounded-circle position-absolute text-small text-white text-v-center" style="top:0;left:0;right:0;bottom:0;z-index:100;background-color:rgba(0, 0, 0, .45);line-height: 1;">
									  <span class="small">审核中</span>
								  </div>
							  </div>
							</div>
							<el-upload
								class="avatar-uploader"
								action="/uploadFiles"
								name="file"
								accept="image/*"
								:data="{path:'user/headimg'}"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
						  </el-form-item>

						  <el-form-item label="昵称" prop="nickname">
						    <el-input v-model="form.nickname" class="col-12 col-sm-6 pl-0 pr-0 rounded-0"></el-input>
						  </el-form-item>
					  	</div>

					  <el-form-item>
					    <el-button type="primary" native-type="submit">立即保存</el-button>
					  </el-form-item>
					</el-form>
				</div>
				<el-divider content-position="left">账号绑定<span class="small text-secondary pl-2">(授权绑定后，可使用第三方帐号快速登录)</span></el-divider>
				<div class="flex py-4 text-center">
					<div class="pr-5">
						<div @click="unbind('unbindQq')" class="el-link el-link--primary"
						v-if="userInfo.bind_qq">
							<img :src="userInfo.bind_qq.headimgurl" width="80" height="80" class="rounded-circle">
						</div>
						<a href="/login/qq" target="_blank" class="el-link el-link--primary"
						v-else>
							<img src="__TEMPLATE_STATIC__/icon/icon_qq_logo.png" width="80" height="80" class="rounded-circle">
						</a>
						<div class="text-primary">QQ<span class="text-secondary" v-if="userInfo.bind_qq">({{userInfo.bind_qq.nickname}})</span></div>
					</div>
					<div class="pr-5">
						<div @click="unbind('unbindWx')" class="el-link el-link--primary"
						v-if="userInfo.bind_wx">
							<img :src="userInfo.bind_wx.headimgurl" width="80" height="80" class="rounded-circle">
						</div>
						<a href="/login/wx" target="_blank" class="el-link el-link--primary"
						v-else>
							<img src="__TEMPLATE_STATIC__/icon/icon_wx_logo.png" width="80" height="80" class="rounded-circle">
						</a>
						<div class="text-primary">微信<span class="text-secondary" v-if="userInfo.bind_wx">({{userInfo.bind_wx.nickname}})</span></div>
					</div>
				</div>
			</div>
			<div v-show="activeName=='blacklist'" class="backlist">
				<div v-if="blacklist.length>0">
					<div class="flex py-3">
						<div class="flex-1 text-secondary">
							您已屏蔽{{Blacklistform.total}}位人才
						</div>
						<el-link type="primary" 
						icon="el-icon-circle-plus-outline"
						:underline="false"
						@click="blacklistDialogVisible=true;">
							添加屏蔽人才
						</el-link>
					</div>
					<div class="flex hover-show-block py-3" 
					v-for="(v,index) in blacklist">
						<div class="flex-1">
							{{v.name}}
						</div>
						<div class="show-block">
						<div>
							<el-link type="primary"
							:underline="false"
							@click="cancelBlacklist(v,index)">
								取消屏蔽
							</el-link>
						</div>
						</div>
					</div>
					<div class="table-responsive py-3">
						<el-pagination
						  background
						  :hide-on-single-page="true"
						  @current-change="getBlacklist"
					      :current-page="Blacklistform.page"
					      :page-size="15"
					      layout="total,  prev, pager, next, jumper"
					      :total="Blacklistform.total">
					    </el-pagination>
					</div>
				</div>
				<div v-else class="empty-text py-5">
					<el-link type="primary" 
					icon="el-icon-circle-plus-outline"
					:underline="false"
					@click="blacklistDialogVisible=true;">
						添加屏蔽人才
					</el-link>
				</div>
			</div>
			<div v-show="activeName=='login_log'">
				<div class="flex text-secondary py-3">
					<div>当前登录IP:</div>
					<div class="flex-1">
						<el-link href="https://www.ip138.com/iplookup.asp?ip={:request()->ip()}&action=2" type="primary" :underline="false" target="_blank">{:request()->ip()}</el-link>
					</div>
				</div>
				<div class="table-responsive">
					<el-table
				      	:data="LoginLog"
			    		stripe
			    		v-loading="Logform.ajax"
			    		style="width: 100%;">
				      <el-table-column
				        prop="create_time"
				        label="登录时间"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="app_name"
				        label="登录应用"
				        width="100">
				      </el-table-column>
				      <el-table-column
				        prop="ip"
				        label="登录IP"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="devices_id"
				        label="设备ID">
				      </el-table-column>
				    </el-table>
				</div>
				<div class="table-responsive py-3">
					<el-pagination
					  background
					  :hide-on-single-page="true"
					  @current-change="getLoginLog"
				      :current-page="Logform.page"
				      :page-size="15"
				      layout="total,  prev, pager, next, jumper"
				      :total="Logform.total">
				    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</div>
<el-dialog
  title="添加屏蔽人才"
  :visible.sync="blacklistDialogVisible"
  width="45%"
  :close-on-click-modal="false">
  <div class="px-5 search">
		<el-form @submit.native.prevent="sendSearchResume">
			<el-input placeholder="人才全称或人才ID" v-model="SearchResumeKey" class="input-with-select"
			@input="sendSearchResume">
			    <el-button native-type="submit" slot="append">搜 索</el-button>
			</el-input>
		</el-form>
	  	<div v-if="SearchResumeKey">
	  		<div class="py-3 small text-secondary">与“{{SearchResumeKey}}”相关的人才</div>
	  		<div v-if="resumelist.length>0">
	  			<div v-for="(v,index) in resumelist">
	  				<el-checkbox v-model="selectResumeList" :label="v.uid" class="py-3">ID:{{v.id}}-{{v.name}}</el-checkbox>
	  			</div>
	  		</div>
	  		<div v-else class="empty-text py-5">无结果</div>
	  	</div>
	  	<div v-else class="pt-5">
		  	<p>可通过以下方式搜索人才</p>
		  	<div class="small text-secondary">· 人才全称：如“张三”</div>
		  	<div class="small text-secondary">· 人才ID：如“1”</div>
	  	</div>
  </div>
  <div slot="footer" class="flex flex-center">
    <el-button @click="blacklistDialogVisible = false">取 消</el-button>
    <div class="flex-1"></div>
    <div class="pr-2">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    </div>
    <el-button type="primary" @click="setBlacklist" :loading="setBlacklistLoading" :disabled="selectResumeList.length<=0">屏蔽所选人才<span class="w-30px d-inline-block text-left">({{selectResumeList.length}})</span></el-button>
  </div>
</el-dialog>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vpassword=(rule, value, callback)=>{
			if (vm.form.password && value === '') {
	          callback(new Error('请再次输入密码'));
	        } else if (value !== vm.form.password) {
	          callback(new Error('两次输入密码不一致!'));
	        } else {
	          callback();
	        }
		};
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
		    blacklistDialogVisible:false,
			activeName:'account',
		    Logform:{
		    	ajax:false,
				total:0,
				page: 1
		    },
		    LoginLog: [],
		    Blacklistform:{
		    	ajax:false,
				total:0,
				page: 1
		    },
		    blacklist: [],
		    selectResumeList:[],
		    isIndeterminate:false,
			checkAll:false,
			setBlacklistLoading:false,
		    SearchResumeKey:'',
		    resumelist: [],
		    headimg:UserInfo.headimg,
			form:{
				user:UserInfo.user,
				mobile:UserInfo.mobile,
				email:UserInfo.email,
				nickname:UserInfo.nickname,
				headimg:'',
				password:'',
				vpassword:''
			},
	        rules: {
	        	vpassword: [
		            { validator: vpassword, trigger: 'blur' }
		        ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
			selectResumeList(val,oldVal){
				let count=this.resumelist.length;
				let checkedCount =val.length;
				this.checkAll=count>0&&checkedCount===count;
				this.isIndeterminate=checkedCount > 0 && checkedCount < count;
			},
			blacklistDialogVisible(val,oldVal){
				this.SearchResumeKey='';
				this.initBlacklistData();
			},
			SearchResumeKey(val,oldVal){
				this.initBlacklistData();
			}
		},
		created(){
			XYBase.created(this);
			this.getLoginLog(1);
			this.getBlacklist(1);
		},
		methods:XYBase.methods({
			initBlacklistData(){
				this.selectResumeList=[];
				this.isIndeterminate=false;
				this.checkAll=false;
				this.setBlacklistLoading=false;
				this.resumelist=[];
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'user/headimg'){
							this.form.headimg=res.data.path;
							this.headimg=res.data.url;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			getLoginLog:function(val){
				var _this=this;
				if(val) _this.Logform.page=val;
				_this.Logform.ajax=true;
				_this.sendGet({
					url:'/user/getLoginLog',
					data:_this.Logform,
				},function(ret){
					_this.Logform.ajax=false;
					if (ret) {
						if(ret.code == 0){
							_this.Logform.per_page=ret.data.per_page;
							_this.Logform.total=ret.data.total;
							_this.LoginLog=ret.data.data;
						}
					}
				});
			},
			handleCheckAllChange(val){
				if(val){
					let data=[];
					for (var i = 0; i < this.resumelist.length; i++) {
						data.push(this.resumelist[i].uid);
					}
					this.selectResumeList=data;
				}else{
					this.selectResumeList=[];
				}
			},
			sendSearchResume(){
				var _this=this;
				if(!_this.SearchResumeKey)return;
				_this.sendGet({
					url:'/user/getSearchResume',
					data:{
						key:_this.SearchResumeKey
					},
				},function(ret){
					if (ret) {
						if(ret.code == 0){
							_this.resumelist=ret.data;
						}
					}
				});
			},
			unbind(type){
				var TypeText='QQ';
				if(type=='unbindWx'){
					TypeText='微信';
				}
				var _this=this;
				_this.$confirm('确定要解绑'+TypeText+'吗？', '提示', {
		          confirmButtonText: '解绑',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
							const loading=XYBase.openloading();
							_this.sendGet({
								url:'/unbind/'+type,
							},function(ret){
								loading.close();
								if (ret) {
									if (ret.code === 0) {
										switch(type){
											case 'unbindQq':
											_this.userInfo.bind_qq=null;
											break;
											case 'unbindWx':
											_this.userInfo.bind_wx=null;
											break;
										}
						        XYBase.success(ret.msg);
									}else{XYBase.msg(ret.msg);}
								}
							});
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			},
			setBlacklist(){
				if(this.setBlacklistLoading)return;
				this.setBlacklistLoading=true;
				var _this=this;
				_this.sendPost({
					url:'/user/setBlacklist',
					data:{
						list:_this.selectResumeList
					},
				},function(ret){
					_this.setBlacklistLoading=false;
					if (ret) {
						if(ret.code == 0){
							_this.blacklistDialogVisible=false;
							_this.getBlacklist(1);
						}else{
							XYBase.msg(ret.msg);
						}
					}
				});
			},
			cancelBlacklist(val,index){
				var _this=this;
				_this.sendGet({
					url:'/user/cancelBlacklist/'+val.id,
				},function(ret){
					if (ret) {
						if(ret.code == 0){
							_this.blacklist.splice(index,1)
						}else{
							XYBase.msg(ret.msg);
						}
					}
				});
			},
			getBlacklist:function(val){
				var _this=this;
				if(val) _this.Blacklistform.page=val;
				_this.Blacklistform.ajax=true;
				_this.sendGet({
					url:'/user/getBlacklist',
					data:_this.Blacklistform,
				},function(ret){
					_this.Blacklistform.ajax=false;
					if (ret) {
						if(ret.code == 0){
							_this.Blacklistform.per_page=ret.data.per_page;
							_this.Blacklistform.total=ret.data.total;
							_this.blacklist=ret.data.data;
						}
					}
				});
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					_this.sendPost({
						url:'',
						data:D,
					},function(ret){
						loading.close();
						if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
		})
	});
</script>
{/block}